<template>
  <div class="block">
    <sg-nav></sg-nav>
    <div class="timeline-container">
      <el-timeline :reverse="reverse" >
        <el-timeline-item
          v-for="(item, index) in releaseData"
          :key="index"
          :timestamp="item.datetime"
          placement="top"
        >
          <el-card class="box-card" shadow="hover">
            <h3 >{{ item.datetime }}</h3>
            <div class="card-header">
              <h2 class="title-text">{{ item.title }}</h2>
              <div class="content-wrapper">
                <div class="image-container">
                  <img :src="item.url" alt="Demo Image" />
                </div>
                <div class="button-container">
                  <el-tooltip class="item" effect="dark" content="查看" placement="top-start">

                    <a :href="'#/DetailArticle?aid=' + item.aid" target="_blank">
                      <el-button type="success" icon="el-icon-check" circle>查看</el-button>
                    </a>
                  </el-tooltip>
                </div>
              </div>
            </div>
            <div class="card-body">
              <p>{{ item.replayMe }}</p>
            </div>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>
  </div>
</template>

<script>
    import header from '../components/header.vue'
    import {getReplayMe} from "../api/comment";
    export default {
        name: "ReplyMe",
        components: { //定义组件
            'sg-nav':header
        },
        data() {
            return {
                fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
                url: 'http://154.8.200.181:8888/down/YzrY9IwoPBia.png',
                dialogVisible: false,
                releaseData:[
                    {
                        id:"1",
                        aid:12,
                        title:"HasMap底层原理",
                        replayMe:"若依回复了你：你说的对",
                        datetime:"2023-12-18",
                    },
                    {
                        id:"2",
                        title:"标题2",
                        datetime:"2023-12-18 21:15",
                    }
                ],
                people:'',
                reverse:true,
                html:{
                    title:"测试",
                    datetime:"2023-12-18",
                    content:"内容"
                },
                myhtml:""
            };
        },
        created() {
            this.getData()

        },
        methods: {
            getData(){
                getReplayMe().then((resp=>{
                    this.releaseData = resp
                }))
            },
            goBack() {
                this.$router.push({ path: "/home/release" });
            },
            handle(value, render) {
                this.myhtml = render;
                console.log(value, render);
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            view(item){
                this.$store.commit('setContent',item)
                console.log("123" + item)
                this.$router.push({path:'/home/viewRelease'})
            },

        }
    }

</script>

<style scoped>
  .button-image-container {
    display: flex;
    align-items: center;
  }

  .button-container {
    display: flex;
    flex-direction: column;
    margin-left: auto; /* Adjust margin as needed */
  }
   .button-image-container {
     display: flex;
     align-items: center;
   }

  .button-container {
    display: flex;
    flex-direction: column;
    margin-left: auto;
  }

  .timeline-container {
    width: 90%;
    margin: 0 auto;
    height: 500px;
    overflow-y: scroll;
  }

  .box-card {
    margin-bottom: 20px;
  }

  .card-header {
    padding: 10px;
    border-bottom: 1px solid #eee;
  }

  .title-text {
    font-weight: normal;
    font-size: 18px;
    margin: 10px 0;
  }

  .demo-type {
    margin-right: 20px;
  }

  .card-body {
    padding: 10px;
  }

  .block {
    background-color: #f5f5f5;
    padding: 20px;
  }

  .timeline-container {
    width: 90%;
    margin: 0 auto;
    height: 500px;
    overflow-y: scroll;
  }

  .box-card {
    margin-bottom: 20px;
    border-radius: 8px;
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out;
  }

  .box-card:hover {
    transform: translateY(-5px);
  }

  .card-header {
    padding: 15px;
    border-bottom: 1px solid #eee;
  }

  .title-text {
    font-weight: bold;
    font-size: 20px;
    margin: 10px 0;
    color: #333;
  }

  .content-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
  }

  .image-container img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
  }

  .button-container {
    margin-left: 15px;
  }

  .card-body {
    padding: 15px;
    color: #666;
  }
  .card-body {
    padding: 15px;
    color: #666;
    background-color: #f9f9f9;
    border-radius: 0 0 8px 8px;
  }

  .card-body p {
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
  }
  /* Add any other necessary styling */
</style>
